import React from "react";
import { Component } from "react";
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import { getSchoolDangerWordCloudApi } from "../../js/bigscreen/api";
import { withRouter } from "react-router";
import "../../css/bigscreen/schoolsecurity.css";


var graphchart;
class SchoolSecurity extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: []
        }
    }
    componentDidMount() {
        let educationId = parseInt(sessionStorage.getItem("departmentId"));
        if (this.props.match.params.county != undefined) {
            this.getSchoolDangerWordCloud(this.props.match.params.county);
        } else {
            this.getSchoolDangerWordCloud(educationId);
        }
    }


    initWordCloud = (data) => {
        
        if (graphchart == null) {
            graphchart = echarts.init(document.getElementById("graphchart"));
        } else {
            echarts.dispose(graphchart)
            graphchart = echarts.init(document.getElementById("graphchart"));
        }
        window.onresize = function () {
            graphchart.resize();
        }
        var option = {
            tooltip: {
                show: false
            },
            grid: {
                left: 0,
                bottom: 0,
                top: 0,
                right: 0,
            },

            series: [
                {
                    type: 'wordCloud',
                    sizeRange: [10, 60],
                    rotationRange: [0, 0],
                    textPadding: 100,
                    gridSize: 8,
                    width: '95%',
                    height: '90%',
                    left: 'center',
                    top: 'center',
                    drawOutOfBound: false,
                    textStyle: {
                        fontFamily: 'sans-serif',
                        // Color can be a callback function or a color string
                        color: function () {
                            // Random color
                            return 'rgb(' + [
                                Math.round(Math.random() * 200 + 55),
                                Math.round(Math.random() * 200 + 55),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    data: data
                },
            ]
        }
        graphchart.setOption(option);
    }

    getSchoolDangerWordCloud = (educationId) => {
        getSchoolDangerWordCloudApi(educationId).then((res) => {
            let dataList = [];
            res.data.schoolDangerWordCloud.forEach((item) => {
                let data = {
                    name: item.word,
                    value: item.frequency
                }
                dataList.push(data);
            })
            this.initWordCloud(dataList);
        }).catch((e) => {
            console.log(e);
        })
    }

    render() {
        return (
            <div className="schoolsecuritybg">
                <div className="schoolsecurityheader">
                    <svg class="icon" aria-hidden="true">
                        <use xlinkHref="#icon-ciyuntu"></use>
                    </svg>
                    <span className="schoolsecurityheadertxt">校园安全隐患画像</span>
                </div>
                <div id="graphchart"></div>
            </div>
        )
    }
}

export default withRouter(SchoolSecurity)